<template>
  <div class="toRaw">
    <h1>这里介绍toRaw的使用</h1>
    <br />
    <div>{{ person }}</div>
    <div>{{ rawPerson }}</div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, toRaw, markRaw, isReactive } from "vue";
// toRaw
// 响应式对象
let person = reactive([{ name: "tony", age: 16 }]);
// 原始对象
let rawPerson = toRaw(person);
// setInterval(() => {
//   person.push({ name: "tony", age: 16 }); //可以操作
//   rawPerson.push({ name: "tony", age: 16 }); //不能操作
// }, 3000);

// markRaw
// 作用：标记一个对象，使其永远不会变成响应式
// 例如mock.js方法，为了防止误把mockjs变成响应式对象，可以使用markRaw去标记mockjs
let citys = markRaw([
  { id: 1, name: "北京" },
  { id: 2, name: "上海" },
  { id: 3, name: "天津" },
  { id: 4, name: "陕西" },
]);
// 根据原始对象citys去创建响应式对象citys2——创建失败，因为citys被markRaw标记了
let citys2 = reactive(citys);
</script>
<style scoped>
.toRaw {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>